<template>
	<view class="work-container">
		<uni-section title="系统管理" type="line" />
		<view class="grid-body">
			<uni-grid :column="4" :showBorder="false" @change="changeGrid">
				<uni-grid-item v-for="(item, index) in menuList" :key="index">
					<view class="grid-item-box" @click="handleClick(item)" :hover-class="'grid-item-box-active'">
						<view class="icon-wrapper" :style="{ backgroundColor: item.color }">
							<uni-icons :type="item.icon" size="28" color="#fff" />
						</view>
						<text class="text">{{ item.title }}</text>
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { navTo } from '../../common/utils';

// 菜单项配置（可扩展）
const menuList = ref([
	{ title: '平台订单', icon: 'person-filled', color: '#007AFF', url: '/pages/sales/order' },
	{ title: '复购订单', icon: 'staff-filled', color: '#58B6FF', url: '/pages/sales/rporder' },
	{ title: '发货管理', icon: 'paperplane-filled', color: '#FFB400', url: '/pages/shipping/index' },
	{ title: '通知公告', icon: 'chat-filled', color: '#909399', action: 'toast' },
	{ title: '客户管理', icon: 'person-filled', color: '#333333', url: '/pages/customer/customer' }
]);

// 点击处理
const handleClick = (item) => {
	if (item.url) {
		navTo({ url: item.url });
	} else if (item.action === 'toast') {
		uni.showToast({ title: '模块建设中~', icon: 'none' });
	}
};
</script>

<style lang="scss" scoped>
$border-radius: 12px;
$transition: all 0.3s ease;

.work-container {
	padding: 16px;
	background-color: #f8f9fb;
	min-height: 100vh;
}

.grid-body {
	margin-top: 12px;
}

.grid-item-box {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 16px 8px;
	border-radius: $border-radius;
	transition: $transition;
	transform: translateY(0);
}

// 悬浮效果
.grid-item-box-active {
	transform: translateY(-4px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.icon-wrapper {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 10px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
	transition: $transition;
}

.text {
	font-size: 26rpx;
	color: #333;
	font-weight: 500;
	text-align: center;
}

/* 响应式优化 */
@media (min-width: 768px) {
	.grid-body {
		padding: 0 20px;
	}
	.text {
		font-size: 15px;
	}
}
</style>
